<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单标签演示</title>
</head>

<body>
    <!--
      表单用于收集信息
    action：表单提交的地址 
    method：提交的方式
            get：将表单数据拼接在地址栏后面提交  不安全而且参数不能太长
            post：将表单数据封装在请求体中提交  安全参数大小无限制
            
    表单信息交是以键值对的形式提交的 
    键：input标签的name属性值
    值：input标签的value属性值
-->
    <form action="" method="post">
        <!-- input 输入框，type属性指定输入框的类型 -->
        <!-- text 文本输入框 value属性指定输入框的默认值 -->
        姓名：<input type="text" name="name" value="张三"> <br><br>
        <!-- password 密码输入框 回显为全为点 -->
        密码：<input type="password" name="password" placeholder="请输入密码哦 "> <br><br>
        <!-- radio 单选框 -->
        <!-- label使点击标签文本即可操作控件，体验更佳 -->
        性别：<label><input type="radio" name="gender" value="1"> 男 </label>
        <label><input type="radio" name="gender" value="2"> 女 </label> <br><br>
        <!-- checkbox 复选框 -->
        爱好：<label><input type="checkbox" name="hobby" value="java"> java </label>
        <label><input type="checkbox" name="hobby" value="game"> game </label>
        <label><input type="checkbox" name="hobby" value="sing"> sing </label>
        <!-- file 文件上传按钮 -->
        图像：<input type="file" name="image"> <br><br>
        <!-- 日期选择器 -->
        生日：<input type="date" name="birthday"> <br><br>
        <!-- 时间选择器 -->
        时间：<input type="time" name="time"> <br><br>
        <!-- 日期时间选择器 -->
        日期时间：<input type="datetime-local" name="datetime"> <br><br>
        <!-- 邮箱输入框 -->
        邮箱：<input type="email" name="email"> <br><br>
        <!-- 数字输入框 -->
        年龄：<input type="number" name="age"> <br><br>
        <!-- select 下拉选择框 -->
        学历：<select name="degree">
            <option value="">---------- 请选择 ----------</option>
            <option value="1">大专</option>
            <option value="2">本科</option>
            <option value="3">硕士</option>
            <option value="4">博士</option>
        </select> <br><br>
        <!-- textarea 文本域   rows显示多少行 cols显示多少列-->
        描述：<textarea name="description" rows="10" cols="30"></textarea> <br><br>
        <input type="hidden" name="id" value="1"><!--隐藏域 用于提交一些额外的信息 -->
        <!-- 提供表格相关按钮 -->
        <input type="button" value="按钮">
        <input type="reset" value="重置">
        <input type="submit" value="提交">
        <br>
    </form>
</body>

</html>